<template>
  <div class="container-fluid container-intro">
    <div class="warrap bg-danger text-light">
      <h2 class="title">{{$store.state.title}}</h2>
      <div class="notice-line" v-if="isEnable">距离结束还有 {{timeLeft}}</div>
      <div class="notice-line" v-if="isEnded">答题已经结束了！</div>
      <div class="notice-line" v-if="!isStarted">距离开始还有 {{timeWait}}</div>
    </div>
    <div class="warrap text-danger">
      <img v-if="!isEnable" src="../assets/emoji_line_19.svg">
      <div v-if="isEnable" class="input-group mb-3 input-group-lg">
        <input type="text" class="form-control" placeholder="请输入姓名" v-model="userName">
        <div class="input-group-append">
          <button class="input-group-text" @click="submit">开始</button>
        </div>
      </div>
    </div>
    <div class="line">{{$store.state.footerTip}}</div>
  </div>
</template>

<script>
export default {
  name: "Intro",
  data() {
    return {
      userName: "",
      timeLeft: "",
      timeWait: "",
      isEnded: false,
      isStarted: true,
      isEnable: true
    };
  },
  computed: {
    dateRange() {
      let sf = this.$store.state.dateSetFrom;
      let st = this.$store.state.dateSetTo;
      let res = {
        from: new Date(sf[0], sf[1] - 1, sf[2]),
        to: new Date(st[0], st[1] - 1, st[2] + 1)
      };
      return res;
    }
  },
  methods: {
    submit() {
      if (this.userName.length > 0) {
        this.$store.commit("setUserName", this.userName);
      }
    },
    calcTimeInfo() {
      //timeLeft
      let timeLeft =
        (this.dateRange.to.getTime() - new Date().getTime()) / 1000;
      let d2 = Math.floor(timeLeft / 86400);
      let h2 = Math.floor((timeLeft % 86400) / 3600);
      let m2 = Math.floor((timeLeft % 3600) / 60);
      let s2 = Math.floor(timeLeft % 60);
      this.timeLeft = "";
      if (d2 > 0) this.timeLeft += d2 + "天 ";
      if (h2 > 0 || d2 > 0) this.timeLeft += h2 + "小时 ";
      if (m2 > 0 || h2 > 0 || d2 > 0) this.timeLeft += m2 + "分钟 ";
      if (s2 > 0 || m2 > 0 || h2 > 0 || d2 > 0) this.timeLeft += s2 + "秒 ";
      //this.timeLeft = d2 + "天" + h2 + "小时" + m2 + "分钟" + s2 + "秒";
      //timeWait
      let timeWait =
        (this.dateRange.from.getTime() - new Date().getTime()) / 1000;
      let d1 = Math.floor(timeWait / 86400);
      let h1 = Math.floor((timeWait % 86400) / 3600);
      let m1 = Math.floor((timeWait % 3600) / 60);
      let s1 = Math.floor(timeWait % 60);
      this.timeWait = "";
      if (d1 > 0) this.timeWait += d1 + "天 ";
      if (h1 > 0 || d1 > 0) this.timeWait += h1 + "小时 ";
      if (m1 > 0 || h1 > 0 || d1 > 0) this.timeWait += m1 + "分钟 ";
      if (s1 > 0 || m1 > 0 || h1 > 0 || d1 > 0) this.timeWait += s1 + "秒 ";
      //this.timeWait = d1 + "天" + h1 + "小时" + m1 + "分钟" + s1 + "秒";
      //bool calculate
      this.isEnded = this.dateRange.to.getTime() - new Date().getTime() < 0;
      this.isStarted =
        this.dateRange.from.getTime() - new Date().getTime() <= 0;
      this.isEnable = this.isStarted && !this.isEnded;
      /*
      //log
      window.console.log({
        timeLeft: this.timeLeft,
        timeWait: this.timeWait
      });
      */
    },
    heartJump() {
      window.setInterval(() => {
        this.calcTimeInfo();
      }, 1000);
    }
  },
  mounted() {
    this.calcTimeInfo();
    this.heartJump();
  }
};
</script>

<style scoped>
.container-intro {
  padding: 0;
  margin: 0;
}
.warrap {
  height: calc(50vh - 12px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3em 2em;
  flex-wrap: wrap;
}
.notice-line {
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
}
.title {
  padding: 0;
  margin: 0;
  font-weight: bold;
}
</style>

